<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./js/vue/compiler.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/vue/observer.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<style type="text/css">
		.taowa {
			margin-top: 50px;
			width: 300px;
			border: 1px solid #000000;
		}
		.zi{
			min-height: 50px;
			width: 300px;
			border: 1px solid pink;
		}
		.ers{
			min-height: 30px;
			width: 250px;
			margin-left: 50px;
			border: 1px solid blue;
		}
		.ontest2{
			height: 50px;
			width: 150px;
			background-color:blue;
			color: white;
		}
	</style>
	<body>
		<div id="app"> 
			<h1>插值表达式</h1>
			<h3>{{ msg }}</h3>
			<h3>{{ count }}</h3>
			<h1>v-text</h1>
			<div v-text="msg"></div>
			<h1>v-model</h1>
			<input type="text" v-model="msg" />
			<input type="text" v-model="count" />
			<h1>v-html</h1>
			<div v-html="htmltest"></div>
			<h1>v-on</h1>
			<button type="button" v-on:click="dian">点击事件</button>
			<div class="ontest2" v-on:click="diant">点击测试2</div>
		</div>

		<div class="taowa">

		</div>
	</body>
	<script type="text/javascript">
		let a = new Vue({
			el: '#app',
			data: {
				msg: 'hello vue',
				count: 100,
				person:{name:'zs'},
				htmltest:'<a href="#">点我</a>',
			},
			methods:{
				 dian:()=>{
					 console.log(444)
					 alert('我被点击了')
				 },
				 diant:()=>{
					 console.log('2被点击了')
				 }
			}
		})
	</script>
</html>
